<template>
	<view style="background-color: white;height:auto!important;" id="box">
		<u-navbar title="名片" :bgColor="theme_color" :autoBack="true" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<view style="padding: 20px;">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="form" :labelPosition="top">
					<u-form-item label="名片样式" labelWidth="100">
						<view
							style="width: 100%;height: 200px;border-radius: 10px;position: relative;flex:7;object-fit: contain;background-size:100% 200px;"
							:style="'background-image:url(' + selected_bg + ');'">
							<view style="height:200px;display: flex;">
								<view style="display: flex;flex:3;align-items: center;">
									<view style="margin: 0 auto;">
										<u-avatar size="80" randomBgColor :src="head_img[0]"></u-avatar>
									</view>
								</view>
								<view style="flex: 6;position: relative;">
									<view style="color: white;margin-top: 20px;">
										<text style="font-size: 16px;font-weight: bold;">{{name}}</text><text
											style="font-size: 12px;margin-left: 10px;">{{position}}</text>
									</view>
									<view style="color: white;margin-top: 10px;">
										{{company}}
									</view>
									<view style="position: absolute;bottom: 15px;">
										<view style="color: white;">
											<text>{{mobile}}</text>
										</view>
										<view style="color: white;padding-top: 10px;">
											<text>{{address}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 10px;">
							<scroll-view scroll-x="true" style="white-space: nowrap;">
								<view v-for="(item,index) in bg_list" :key="index"
									:class='index==bg_current?"bg_mask":""'
									style="display: inline-block;width:70px;height:50px;margin-right: 10px;position: relative;"
									@click.stop="selectBg(index)">
									<u-image :src="item" width="100%" height="50px" radius="5"></u-image>
								</view>
							</scroll-view>
						</view>
					</u-form-item>
					<u-form-item label="头像" prop="head_img">
						<view style="width: 100%;">
							<view v-if="head_img.length>0"
								style="position: relative;width: 100px;height: 100px;margin: 0 auto;">
								<image :src="head_img[0]" style="width: 100px;height: 100px;" @tap="previewImage"></image>
								<view class="del-con" @click.stop="delete_image">
									<view class="del-wrap">
										<image class="del-image"
											src="">
										</image>
									</view>
								</view>
							</view>
							<view v-else
								style="width: 100px;height: 100px;margin: 0 auto;border: 1px solid #CDCDCD;display: flex;align-items: center;border-radius: 10px;"
								@tap="chooseImage">
								<u-icon name="camera-fill" color="#CDCDCD" size="50"></u-icon>
							</view>
							<view style="text-align: center;padding: 10px;color: #666666;">建议上传500*500的图片</view>
						</view>
					</u-form-item>
					<u-form-item label="*姓名" prop="name" borderBottom>
						<u--input v-model="model.name" border="none" fontSize="14px" color="#999"></u--input>
					</u-form-item>
					<u-form-item label="公司名称" prop="company" labelWidth="100" borderBottom>
						<u--input v-model="model.company" border="none" placeholder="(自由职业者可留空)" fontSize="14px" color="#999"></u--input>
					</u-form-item>
					<u-form-item label="公司介绍" labelWidth="100">
						<view @click="addCompanyDesc()" v-if="model.company_desc == ''">
							<view
								style="color: #5555ff;text-align: center;line-height: 40px;font-size: 16px;font-weight: bolder;">
								+添加公司介绍
							</view>
							<view style="color: #999999;text-align: center;">支持添加图片、文字</view>
						</view>
						<view v-else>
							<view style="width: 100%;height: 20px;" @click="addCompanyDesc">
								<view class="flex" style="float: right;margin-right: 10px;">
									<view>
										<u-icon name="edit-pen" color="#5555ff" size="20"></u-icon>
									</view>
									<view style="color: #5555ff;">编辑</view>
								</view>
							</view>
							<view>
								<u-parse :content="model.company_desc"></u-parse>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="业务介绍" prop="business" labelWidth="100">
						<!-- <editor id="editor" class="ql-container" placeholder="请输入内容" @ready="onEditorReady"
							style="margin-top: 10px;" @input="onEditorChange"></editor>
						<view style="width: 100%;display: flex;justify-content: flex-end;margin-top: 10px;">
							<u-button size="small" @tap="undo" text="撤销" type="primary"
								:customStyle="{'width':'80px'}"></u-button>
						</view> -->
						<view @click="addBusinessDesc()" v-if="model.business == ''">
							<view
								style="color: #5555ff;text-align: center;line-height: 40px;font-size: 16px;font-weight: bolder;">
								+添加业务介绍
							</view>
							<view style="color: #999999;text-align: center;">支持添加图片、文字</view>
						</view>
						<view v-else>
							<view style="width: 100%;height: 20px;" @click="addBusinessDesc">
								<view class="flex" style="float: right;margin-right: 10px;">
									<view>
										<u-icon name="edit-pen" color="#5555ff" size="20"></u-icon>
									</view>
									<view style="color: #5555ff;">编辑</view>
								</view>
							</view>
							<view>
								<u-parse :content="model.business"></u-parse>
							</view>
						</view>
					</u-form-item>

					<block v-for="(item, index) in model.mobile" :key="index">
						<u-form-item :label="'*手机号码'+(index == 0 ?'':index+1)" borderBottom labelWidth="100">
							<view style="display: flex;align-content: space-between;">
								<u--input v-model="item.number" border="none" :adjustPosition="false"
									@blur="checkMobile(item,index)"></u--input>
								<u-icon name="minus-circle" @click.stop="delItem(item,index)" v-if="index > 0"
									size="24"></u-icon>
								<u-icon name="plus-circle" @click.stop="addItem()" v-if="index == 0 "
									size="26"></u-icon>
							</view>
						</u-form-item>
					</block>
					<block v-for="(item, index) in model.tel" :key="index">
						<u-form-item :label="'电话号码'+(index == 0 ?'':index+1)" borderBottom labelWidth="100">
							<view style="display: flex;align-content: space-between;">
								<u--input v-model="item.number" border="none" @blur="checkTel(item,index)" fontSize="14px" color="#999"></u--input>
								<u-icon name="minus-circle" @click.stop="delItemTel(item,index)" v-if="index > 0"
									size="24"></u-icon>
								<u-icon name="plus-circle" @click.stop="addItemTel()" v-if="index == 0"
									size="26"></u-icon>
							</view>
						</u-form-item>
					</block>
					<u-form-item label="名片定位" borderBottom labelWidth="100">
						<view class="padding10 acea-row row-between row-middle" @click="showAreaPicker=true">
							<view style="flex: 1;">{{areaName}}</view>
							<u-icon color="#5F8732" name="arrow-right" size="20px"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="*职位" prop="position" borderBottom>
						<u--input v-model="model.position" border="none" placeholder="(自由职业者选填业务技能)"></u--input>
					</u-form-item>
					<u-form-item label="*地址" prop="address" borderBottom>
						<view style="display: flex;align-content: space-between;">
							<u--input v-model="model.address" border="none" :placeholder="model.address" fontSize="14px" color="#999"
								@input="addressChange" @blur="addressChange"></u--input>
							<u-icon name="map" size="28" @click.stop="chooseLocation()" width="50"></u-icon>
						</view>
						<view style="color: #666666;">{{showLat}}</view>

					</u-form-item>
					<block v-for="(item, index) in model.website" :key="index">
						<u-form-item :label="'网址'+(index == 0 ?'':index+1)" borderBottom labelWidth="100">
							<view style="display: flex;align-content: space-between;">
								<u--input v-model="item.name" border="none" @blur="checkString(item,index)" fontSize="14px" color="#999"></u--input>
								<u-icon name="minus-circle" @click.stop="delItemWeb(item,index)" v-if="index > 0"
									size="26"></u-icon>
								<u-icon name="plus-circle" @click.stop="addItemWeb()" v-if="index == 0 "
									size="26"></u-icon>
							</view>
						</u-form-item>
					</block>
					<u-form-item label="微店绑定" borderBottom labelWidth="100">
						<view style="display: flex;justify-content: space-between;" @click="shop_show = true">
							<view>点击搜索微店</view>
							<view class="flex" style="align-items: flex-end;">
								<view style="color: #5555ff;">{{selectedValue}} </view>
								<view><u-icon name="arrow-right"></u-icon></view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="店铺绑定" borderBottom labelWidth="100">
						<view style="display: flex;justify-content: space-between;" @click="store_show = true">
							<view>点击搜索店铺</view>
							<view class="flex" style="align-items: flex-end;">
								<view style="color: #5555ff;">{{selectedStoreValue}} </view>
								<view><u-icon name="arrow-right"></u-icon></view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="小程序名称" prop="mp" borderBottom labelWidth="100">
						<u--input v-model="model.mp" border="none" fontSize="14px" color="#999"></u--input>
					</u-form-item>
					<u-form-item label="邮箱" prop="email" borderBottom>
						<u--input v-model="model.email" border="none" placeholder="例:xxxx@xx.com" fontSize="14px" color="#999"></u--input>
					</u-form-item>
					<u-form-item label="微信号" prop="wechat" labelWidth="60" borderBottom>
						<u--input v-model="model.weixin" border="none" fontSize="14px" color="#999"></u--input>
					</u-form-item>

				</u--form>
				<view style="margin-top: 40px;">
					<u-button @click="submit" type="success" text="提交"></u-button>
				</view>
			</view>
		</view>
		<u-overlay :show="mask_show" @click="mask_show = false"></u-overlay>
		<u-popup :show="shop_show" @close="shop_close" mode="bottom" :closeable="true" round="10">
			<view style="padding: 40px 20px 20px 20px;max-height: 400px;min-height: 400px;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<u--input border="surround" v-model="searchValue" @change="searchChange" :clearable="true"
						placeholder="输入要搜索的微店"></u--input>
					<view style="width: 10px;"></view>
					<u-button text="确定" @click="shop_confirm" size="mini" type="primary"
						:customStyle="{width:'50px',height:'37px'}"></u-button>
				</view>

				<scroll-view scroll-y="true" style="height: 100%;">
					<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
					height="200px" bottom="10px" top="10px"> -->
					<view v-for="(item,index) in dianpu_list" :key="index" style="padding: 5px 0;">
						<view @click="selectDianpu(item)">{{item.dianpu_name}}</view>
					</view>
					<!-- </mescroll-body> -->

				</scroll-view>
			</view>
		</u-popup>

		<u-popup :show="store_show" @close="store_close" mode="bottom" :closeable="true" round="10">
			<view style="padding: 40px 20px 20px 20px;max-height: 400px;min-height: 400px;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<u--input border="surround" v-model="searchStoreValue" @change="searchStoreChange" :clearable="true"
						placeholder="输入要搜索的店铺"></u--input>
					<view style="width: 10px;"></view>
					<u-button text="确定" @click="store_confirm" size="mini" type="primary"
						:customStyle="{width:'50px',height:'37px'}"></u-button>
				</view>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view v-for="(item,index) in store_list" :key="index" style="padding: 5px 0;">
						<view @click="selectStore(item)">{{item.supplier_name}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<area-picker @close="showAreaPicker=false" :show="showAreaPicker" @confirm="getRegionArr"></area-picker>
	</view>
</template>

<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	import {
		BASE_URL
	} from '@/config/app';
	import {
		mapGetters
	} from "vuex";
	import {
		add_card,
		card_info
	} from '@/api/yellowpage.js'
	import {
		dianpu_list
	} from '@/api/index.js'
	import {
		shop_info,
		street_list,
		shop_info_head
	} from '@/api/store.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				bg_list: getApp().globalData.card_bg_list,
				selected_bg: '',
				bg_current: 0,
				name: '您的姓名',
				company: '暂未填写公司',
				position: '暂未填写职位',
				mobile: '暂未填写电话',
				address: '暂未填写地址',
				mask_show: false,
				navH: '',
				theme_color: getApp().globalData.theme_color,
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9],

				model: {
					back_color: 1, //名片背景 默认选1
					address: '',
					// head_img: '',
					weixin: '',
					company: '',
					mobile: [{
						number: ''
					}],
					business: '',
					company_desc: '',
					tel: [{
						number: ''
					}], //固定电话
					website: [{
						name: ''
					}], //网址
					mp: '', //小程序名称
					name: '',
					position: '',
					email: '',
					lng: '',
					lat: '',
					dianpu_id: 0,
					supplier_id: 0,
					province: '',
					city: '',
					district: '',
				},
				id: '',
				head_img: [],
				rules: {
					'address': {
						type: 'string',
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'position': {
						type: 'string',
						required: true,
						message: '请填写职位',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				},
				dianpu_list: [],
				shop_show: false,
				searchValue: '',
				selectedValue: '',

				store_list: [],
				store_show: false,
				searchStoreValue: '',
				selectedStoreValue: '',
				
				showAreaPicker: false,
				areaName: "点击选择",
			}
		},
		watch: {
			model: {
				handler(newVal, oldVal) {
					if (newVal.name != '') {
						this.name = newVal.name;
					} else {
						this.name = '您的姓名'
					}
					if (newVal.position != '') {
						this.position = newVal.position;
					} else {
						this.position = '暂未填写职位'
					}
					if (newVal.company != '') {
						this.company = newVal.company;
					} else {
						this.company = '暂未填写公司'
					}
					if (newVal.address != '') {
						this.address = newVal.address;
					} else {
						this.address = '暂未填写地址'
					}
					if (newVal.mobile[0].number != '') {
						this.mobile = newVal.mobile[0].number;
					} else {
						this.mobile = '暂未填写电话'
					}
				},
				deep: true
			}
		},
		computed: {
			...mapGetters(['isLogin', 'app_token']),
			showLat() {
				if (this.model.lat != '') {
					return this.model.lat + '--' + this.model.lng;
				} else {
					return '提示:手选地址后地图方可展示';
				}

			}
		},
		onShow() {
			var that = this;
			this.getDianpuList()
			this.getStoreList()
	
			if (uni.getStorageSync('card_com_desc') !== '') {
				console.log('公司详情编写', uni.getStorageSync('card_com_desc'))
				that.model.company_desc = uni.getStorageSync('card_com_desc')
			}
			
			if (uni.getStorageSync('card_bus_desc') !== '') {
				console.log('业务详情编写', uni.getStorageSync('card_bus_desc'))
				that.model.business = uni.getStorageSync('card_bus_desc')
			}
			
		},
		onLoad(e) {
			var that = this;
			uni.setStorageSync('card_com_desc', '')
			uni.setStorageSync('card_bus_desc', '')
			this.navH = getApp().globalData.navHeight / 2;
			if (!this.isLogin) {
				toLogin()
			}
			if (e.id) {
				that.id = e.id;
				card_info({
					id: that.id,
					app_token: that.app_token
				}).then(res => {
					var bgIndex = parseInt(res.data.back_color) - 1;

					this.selected_bg = this.bg_list[bgIndex];

					this.bg_current = bgIndex;

					if (res.data.mobile != '') {
						res.data.mobile = res.data.mobile.split(",");
					}
					if (res.data.tel != '') {
						res.data.tel = res.data.tel.split(",");
					}
					if (res.data.website != '') {
						res.data.website = res.data.website.split(",");
					}

					that.model = {
						...res.data
					}
					// that.model.business = that.model.business.replace(/style="[^"]+"/gi, "")
					// 	.replace(/style='[^']+'/gi, "") //小程序展示要自己统一的样式，替换了行内样式
					// 	.replace(/(<!--(.|[\r\n])*?-->)/gi, "") //替换了注释的内容这能替掉大部分
					// 	.replace(/<xml[^>]*>(.|\n)*<\/xml>/gi, "") //替换了xml标签<xml></xml>word粘贴带出一堆标签包含在xml里干掉它
					// 	.replace(/undefined/gi, "") //里面莫名有个undefined 

					if (that.model.mobile.length) {
						let temp = [];
						that.model.mobile.forEach(function(value, index, array) {
							temp.push({
								number: value
							})
						})
						that.model.mobile = temp;
					} else {
						that.model.mobile = [{
							number: ''
						}];
					}

					if (that.model.tel.length) {
						let temp1 = [];
						that.model.tel.forEach(function(value, index, array) {
							temp1.push({
								number: value
							})
						})
						that.model.tel = temp1;
					} else {
						that.model.tel = [{
							number: ''
						}];
					}

					if (that.model.website.length) {
						let temp2 = [];
						that.model.website.forEach(function(value, index, array) {
							temp2.push({
								name: value
							})
						})
						that.model.website = temp2;
					} else {
						that.model.website = [{
							name: ''
						}];
					}

					if (res.data.head_img != '' && res.data.head_img != 'https://www.ow123.net/') {
						that.head_img.push(res.data.head_img)
					}

					if (res.data.dianpu_id != '' || res.data.dianpu_id != 0) {
						shop_info({
							id: res.data.dianpu_id
						}).then(res1 => {
							this.searchValue = this.selectedValue = res1.data.dianpu_name;
						})
					}

					if (res.data.supplier_id != '' || res.data.supplier_id != 0) {
						shop_info_head({
							app_token: this.app_token,
							supplier_id: res.data.supplier_id
						}).then(res1 => {
							this.searchStoreValue = this.selectedStoreValue = res1.data.supplier_name;
						})
					}

				})
			} else {
				this.selected_bg = this.bg_list[0];
			}

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
			// uni.createSelectorQuery().select("#box").boundingClientRect((res) => {
			// uni.pageScrollTo({
			// 	duration: 1000, // 过渡时间
			// 	scrollTop: 0, // 滚动的实际距离
			// })
			// }).exec()
		},
		methods: {
			getRegionArr(e) {
				this.model.province = e.id[0]
				this.model.city = e.id[1]
				this.model.district = e.id[2]
				this.areaName = e.names.join('-')
			},
			addCompanyDesc() {
				uni.navigateTo({
					url: "/pages/public-page/p-editor/p-editor?save_key=card_com_desc"
				})
			},
			addBusinessDesc() {
				uni.navigateTo({
					url: "/pages/public-page/p-editor/p-editor?save_key=card_bus_desc"
				})
			},
			selectBg(index) {
				this.selected_bg = this.bg_list[index];
				this.bg_current = index;
				this.model.back_color = index + 1;
			},
			getDianpuList() {
				dianpu_list({
					dianpu_name: this.searchValue,
					market_type: 0,
					page: 1,
				}).then(async (res) => {
					this.dianpu_list = res.data; //追加新数据
				})
			},
			getStoreList() {
				street_list({
					street_type: '',
					supplier_name: this.searchStoreValue,
					page: 1,
				}).then(async (res) => {
					this.store_list = res.data; //追加新数据
				})
			},
			shop_confirm() {
				if (this.searchValue == '') {
					this.selectedValue = '';
					this.model.dianpu_id = 0;
				}
				this.shop_show = false;
			},
			searchChange(e) {
				this.searchValue = e;
				this.getDianpuList()
			},
			shop_close() {
				this.shop_show = false;
			},
			selectDianpu(item) {
				this.selectedValue = item.dianpu_name;
				this.searchValue = item.dianpu_name;
				this.model.dianpu_id = item.id;
			},


			store_confirm() {
				if (this.searchStoreValue == '') {
					this.selectedStoreValue = '';
					this.model.dianpu_id = 0;
				}
				this.store_show = false;
			},
			searchStoreChange(e) {
				this.searchStoreValue = e;
				this.getStoreList()
			},
			store_close() {
				this.store_show = false;
			},
			selectStore(item) {
				this.selectedStoreValue = item.supplier_name;
				this.searchStoreValue = item.supplier_name;
				this.model.supplier_id = item.supplier_id;
			},

			addressChange(e) {
				if (e == '') {
					this.model.lat = '';
					this.model.lng = '';
				}
			},
			chooseLocation() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						that.model.lat = res.latitude;
						that.model.lng = res.longitude;
						that.model.address = res.address;
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			checkString(item, index) {
				if (item.name == '' && index == 0) {
					this.model.website[index].name = '';
				} else if (item.name == '' && index > 0) {
					this.model.website = this.model.website.filter((i) => {
						return i != item
					})
				}
			},
			addItemWeb() {
				let add = {
					name: ''
				}
				this.model.website.push(add)
			},
			delItemWeb(item, index) {
				if (index == 0) {
					uni.showToast({
						title: '不能删除最后一项',
						icon: 'error'
					})
					return false;
				}
				this.model.website = this.model.website.filter((i) => {
					return i != item
				})
			},
			checkTel(item, index) {
				if (item.number == '' && index == 0) {
					this.model.tel[index].number = '';
				} else if (item.number == '' && index > 0) {
					this.model.tel = this.model.tel.filter((i) => {
						return i != item
					})
				}
			},
			addItemTel() {
				let add = {
					number: ''
				}
				this.model.tel.push(add)
			},
			delItemTel(item, index) {
				if (index == 0) {
					uni.showToast({
						title: '不能删除最后一个电话号码',
						icon: 'error'
					})
					return false;
				}
				this.model.tel = this.model.tel.filter((i) => {
					return i != item
				})
			},
			checkMobile(item, index) {
				let reg = /^1[3456789]\d{9}$/;

				if (!reg.test(item.number) && item.number != '') {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号',
					})
					this.model.mobile[index].number = '';
				} else if (!reg.test(item.number) && index == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号',
					})
					this.model.mobile[index].number = '';
					return;
				} else if (item.number == '' && index > 0) {
					this.model.mobile = this.model.mobile.filter((i) => {
						return i != item
					})
				}
			},
			addItem() {
				let add = {
					number: ''
				}
				this.model.mobile.push(add)
			},
			delItem(item, index) {
				if (index == 0) {
					uni.showToast({
						title: '不能删除最后一个电话号码',
						icon: 'error'
					})
					return false;
				}
				this.model.mobile = this.model.mobile.filter((i) => {
					return i != item

				})
			},


			// 选择头像图片
			chooseImage: async function() {
				let that = this;
				if (this.head_img.length === 1) {
					that.$util.Tips({
						title: '请先删除原图片'
					})
					return;
				}

				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.head_img.length + this.count[this.countIndex] > 9 ? 9 - this.head_img
						.length : this.count[this.countIndex],
					success: (res) => {
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0],
							encoding: 'base64',
							success: res1 => {
								// console.log(res1)
								that.head_img[0] = 'data:image/jpeg;base64,' + res1.data
							},
							fail: e => {
								console.log("图片转换B64失败");
								uni.showToast({
									title: '图片转换B64失败',
									duration: 2000
								})
								that.head_img = [];
							}
						})

					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},

			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.head_img
				})
			},

			delete_image: function() {
				this.head_img = [];
			},

			submit() {
				if (this.model.mobile[0].number == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					})
					return;
				}
				if (this.model.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return;
				}
				if (this.model.address == '') {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return;
				}
				if (this.model.position == '') {
					uni.showToast({
						title: '请输入职位',
						icon: 'none'
					})
					return;
				}

				this.mask_show = true;

				if (this.model.mobile.length > 0) {
					var temp = [];
					this.model.mobile.forEach(function(value, index, array) {
						temp.push(value.number)
					})
					this.model.mobile = temp.toString();
				}

				if (this.model.tel.length > 0) {
					var temp1 = [];
					this.model.tel.forEach(function(value, index, array) {
						temp1.push(value.number)
					})
					this.model.tel = temp1.toString();
				}

				if (this.model.website.length > 0) {
					var temp2 = [];
					this.model.website.forEach(function(value, index, array) {
						temp2.push(value.name)
					})
					this.model.website = temp2.toString();
				}


				uni.showLoading({
					title: '上传中...',
					mask: true
				});

				this.$refs.form.validate().then(res => {
					var that = this;

					let model = {
						...that.model,
						app_token: that.app_token
					}

					model.head_img = that.head_img;

					add_card(model).then(res => {

						that.model = {
							// address: '',
							// head_img: '',
							// weixin: '',
							// company: '',
							mobile: [{
								number: ''
							}],
							// business: '',
							tel: [{
								number: ''
							}], //固定电话
							website: [{
								name: ''
							}], //网址
							// mp: '', //小程序名称
							// name: '',
							// position: '',
							// email: '',
							lng: '',
							lat: ''
						}
						uni.hideLoading()
						if (res.status == 0) {
							uni.showToast({
								title: '提交' + res.msg + ',请等待审核通过',
								icon: "success",
								duration: 2000,
								mask: true
							});
						} else {
							uni.showToast({
								title: '提交' + res.msg,
								icon: "none",
								duration: 2000,
								mask: true
							});
						}


						setTimeout(() => {
							uni.navigateBack()
						}, 2000)

					}).catch(err => {
						uni.hideLoading()
					})
				}).catch(errors => {
					uni.hideLoading()
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-icon {
		margin: 0 auto;
	}

	/deep/ .u-form-item__body__right__content__slot {
		width: 100%;
	}


	.bg_mask ::after {
		content: " ";
		position: absolute;
		display: inline-block;
		width: 12px;
		height: 6px;
		border-width: 0 0 2px 2px;
		overflow: hidden;
		border-color: #e64848;
		border-style: solid;
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
		right: 3px;
		top: 4px;
	}

	#editor {
		max-width: 330px;
		max-height: 300px;
		border: 1px solid #CCCCCC;
	}
</style>